<template>
	<router-layout>
	<div class="pageBg">
		<van-loading color="#1989fa" type="spinner"  class="Load" v-if="loading" />
		<div class="bodymain" v-else>
			<div class="time">
				支付剩余时间 
				<span>
					<van-count-down 
					  class="countTime" 
						ref="countDown" 
						:auto-start="true" 
						:time="hastime" 
						format="mm 分 ss 秒"
						@finish="finish" />
				</span>
			</div>
			<div class="orderbox">
				<div class="orderitem">
					<div class="itemL">订单号：</div>
					<div class="itemR">{{orderNumber}}</div>
				</div>
				<div class="orderitem">
					<div class="itemL">出发：</div>
					<div class="itemR">{{station_name}}</div>
				</div>
				<div class="orderitem">
					<div class="itemL">到达：</div>
					<div class="itemR">{{stop_name}}</div>
				</div>
				<div class="orderitem">
					<div class="itemL">出发时间：</div>
					<div class="itemR">{{depart_date}}</div>
				</div>
			</div>
			<div class="paybox">
				<div>支付方式</div>
				<div class="paymain">
					<div><img src="@/assets/images/searchBus/wxpay.png"/></div>
					<div class="paywx">微信支付</div>
				</div>
			</div>
			<div class="subBar" v-show="subBar">
				<div class="price">
					<span>¥</span>{{totalPrice}}
				</div>
				<div class="sunbarR">
					<van-button class="paycancle" @click="payCancle">取消</van-button>
					<van-button class="topay" @click="payOrder">支付</van-button>
				</div>
			</div>
		</div>
	</div>
	</router-layout>
</template>

<script>
	import authMixin from '@/mixin/mixin'
	import { wexinPay } from "@/utils/wx-sdk"
	export default {
		data() {
			return {
				subBar:true,
				loading:false,
				create_time_date:'2021-1-17 22:32:30',//订单创建时间后台传日期格式
				create_time:1610893404077,  //订单创建时间后台传时间戳格式
				time:600000, //订单默认失效时间10分钟
				hastime:0,//倒计时显示 毫秒
				date:'',
				Week:'',
				DepartTime:'',
				orderNumber:'',
				card_ids: [],
				phone: '',
				full_ticket_price: 0,
				half_fare_price: 0,
				depart_date: '',
				schedule_code: '',
				station_code: '',
				station_name: '',
				stop_code: '',
				stop_name: '',
				totalPrice:0,
			}
		},
		mixins:[authMixin],
		created(){
			this.getRouterData()
			this.hastime = this.time - (new Date().getTime() - Number(this.create_time))
			// console.log(new Date(this.create_time_date).valueOf())
		},
		mounted(){
			
		},
		watch:{
			orderNumber(){
				this.$nextTick(()=>{
					
				})
			}
		},
		methods:{
			getRouterData(){
				this.create_time = this.$route.query.create_time
				this.orderNumber = this.$route.query.orderNumber
				this.phone = this.$route.query.phone
				this.full_ticket_price = this.$route.query.full_ticket_price
				this.half_fare_price = this.$route.query.half_fare_price
				this.depart_date = this.$route.query.depart_date
				this.schedule_code = this.$route.query.schedule_code
				this.station_code = this.$route.query.station_code
				this.station_name = this.$route.query.station_name
				this.stop_code = this.$route.query.stop_code
				this.stop_name = this.$route.query.stop_name
				this.card_ids = this.$route.query.card_ids
				this.totalPrice = this.$route.query.totalPrice
			},
			finish(){
				//倒计时结束
				this.subBar = false
				this.$dialog.alert({
				  message: '订单超时请重新提交'
				}).then(()=>{
					this.$router.back()
				})
				
			},
			payCancle(){
				//取消支付
				this.$router.back()
			},
			payOrder(){
				// this.$request({
				// 	method:'post',
				// 	url:'/order/pay',
				// 	data:{
				// 		order_number: this.orderNumber
				// 	}
				// 	}).then(res=>{
				// 		console.log(res.data)
				// })
				this.$request({
						method:'post',
						url:'/order/pay',
						data:{
							order_number: this.orderNumber
						}
					}).then(res=>{
						console.log(res.data)
				  //调用封装的支付函数
				  wexinPay(res.data.config,res.data.pay).then(res=>{
				    console.log("支付成功")
						this.$router.replace('/paySuccess')
				  }).catch(err=>{
				    console.log("支付失败")
						this.$toast.fail({
							message: '支付失败',
							forbidClick: true,
							duration: 300
						})
				  })
				})
				
			}
		}
	}			
				
</script>

<style scoped>
	.subBar{
		position: fixed;
		left:0;
		right:0;
		bottom:0;
		height: 1.5rem;
		background: #fff;
		z-index: 1000;
		padding: 0 .4rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 200000000000;
	}
	.price{
		height: 1.5rem;
		color: #FB5D57;
		font-size: .6rem;
		display: flex;
		align-items: center;
	}
	.price span{
		font-size: .45rem;
	}
	.sunbarR{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sunbarR .detail{
		color: #999;
		font-size: .33rem;
	}
	.time{
		background: #fff;
		text-align: center;
		padding: .2rem 0;
		font-size: .34rem;
		border-bottom: 0.02667rem solid #ebedf0;
	}
	.time span{
		margin-left: .1rem;
		font-size: .34rem;
	}
	.countTime{
		color: #FB5D57;
		display: inline-block;
	}
	.orderitem{
		display: flex;
		padding: .3rem .3rem 0 .3rem;
		background: #fff;
		font-size: .36rem;
	}
	.itemL{
		letter-spacing: .06rem;
		color: #999;
		margin-right: 0;
	}
	.itemR{
		font-size: .38rem;
	}
	.orderbox{
		padding-top: .1rem;
		padding-bottom: .4rem;
		background: #fff;
	}
	.paybox{
		background: #fff;
		margin-top: .3rem;
		padding: .3rem .3rem;
		display: flex;
		justify-content: space-between;
		font-size: .38rem;
	}
	.paywx{
		color:#999;
		font-size: .36rem;
	}
	.paymain{
		display: flex;
		justify-content: space-between;
		height: .6rem;
		align-items: center;
	}
	.paymain img{
		height: .6rem;
		margin-right: .1rem;
		vertical-align: -.1rem;
	}
	.topay{
		background: linear-gradient(45deg, #62b0fb, #438bf7);
		width: 2.5rem;
		height: 1rem;
		border-radius: 1rem;
		font-size: .4rem;
		color: #fff;
		border: none;
		outline: none;
		box-shadow: 0.05333rem 0.13333rem 0.4rem rgba(93, 170, 250, 0.3);
	}
	.paycancle{
		margin-right: .2rem;
		background: linear-gradient(to right, #ffd01e, #ff8917);;
		width: 2.5rem;
		height: 1rem;
		border-radius: 1rem;
		font-size: .4rem;
		color: #fff;
		border: none;
		outline: none;
	}
	.Load{
		position: fixed;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 1000;
	}
</style>
